<template>
	<!-- 剧本详情容器 -->
	<view class="boxes">
		<view v-for="(i,v) in screenplay" :key="v" class="box" @click="pageToDetail(i.id)">
			<image :src="'http://124.220.177.66:8082'+i.scriptUrl"></image>
			<view class="font">
				<text class="mangd">{{i.scriptName}}</text>
				<text class="yinhe">硬核/还原/本格/其他/现代</text>
				<text class="zit">{{i.scriptDescribe}}</text>
				<text class="shif" style="margin-top: 10rpx">{{i.scriptPrice}}分</text>
				<view class="zit" style="margin-top: 10rpx">
					<text><text class="iconfont icon-wode-wode"></text>{{i.peopleNum}}人</text>
					<text><text class="iconfont icon-shijian"></text>{{i.gameTime}}</text>
					<text>
						<text class="iconfont icon-chongdian"></text>
						<text v-if="i.level == '0'">简单</text>
						<text v-if="i.level == '1'">进阶</text> 
						<text v-if="i.level == '2'">烧脑</text>
					</text>
				</view> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"myScriptDetail",
		
		props:['screenplay'],
		data() {
			return {

			}
		},
		methods: {
			//跳转至剧本详情页面
			pageToDetail(id){
				uni.navigateTo({
					url: '/pages/script/scriptDetails/scriptDetails?id='+id
				});
			},
		},
	}
</script>

<style lang="scss">
	@import url('~@/static/iconfont/iconfont.css');
	
	text {
		display: block;
	}
	
	
	.boxes {
		width: 750rpx;
	}

	.box {
		overflow: hidden;
		width: 720rpx;
		height: 350rpx;
		background-color: #232433;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		image {
			float: left;
			width: 250rpx;
			height: 320rpx;
			border-radius: 20rpx;
			margin-top: 15rpx;
			margin-left: 15rpx;
		}
	}

	.font {
		float: left;
		width: 430rpx;
		height: 300rpx;
		margin-left: 20rpx;
		margin-top: 23rpx;
		font-size: 27rpx;

		text {
			padding: 5rpx 0;
		}
	}

	.yinhe {
		color: #937ADA;
	}

	.shif {
		text-align: center;
		font-size: 25rpx;
		border-radius: 8rpx;
		color: #937ADA;
		width: 72rpx;
		height: 35rpx;
		background-color: #332D39;
	}

	.mangd {
		color: aliceblue;
		font-size: 35rpx;
	}

	.zit {
		overflow: hidden;
		color: #5A576E;
		display: inline-block;
		//多行隐藏省略
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;

		text {
			float: left;
		}
	}

	.icon-wode-wode {
		color: #FF6E19;
	}

	.icon-shijian {
		color: #A488FB;
		margin-left: 20rpx;
	}

	.icon-chongdian {
		color: #5990FD;
		margin-left: 20rpx;
	}
</style>
